<template>
    <div class="header">
      <div class="top">
        <div class="topbar">
          <div class="city-selector">
            <div class="cityName">成都</div>
          </div>
          <div class="topbar-container">
            <div class="qc">全城</div>
            <div class="sx">筛选</div>
            <div class="sort">综合排序</div>
            <div class="search-selector">
              <div class="iconfont icon-sousuo"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle">
          <Cinemalist :cinemalist="cinemalist"></Cinemalist>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { List } from 'vant'
import Cinemalist from '@/components/cinemalist'
// import getCinemalist from '@/api'
Vue.use(List)
// Vue.use(Sticky)
export default {
  data () {
    return {
      cinemalist: []
      // list: [],
      // loading: false,
      // finished: false
    }
  },
  components: {
    Cinemalist
  },
  mounted () {
    // getCinemalist().then(res => {
    //   this.cinimalist = res.data.data
    // })
  },
  methods: {
    // onLoad () {
    //   console.log('可以加载数据了')
    //   this.loading = true // 表示开始加载了
    //   getCinemalist({ limit: 10, count: this.count }).then(res => {
    //     this.loading = false // 表示结束加载了
    //     // 如果没有数据
    //     if (res.data.len === 0) {
    //       this.finished = true // 表示数据加载完毕了
    //     } else {
    //       this.cinemalist = [...this.cinemalist, ...res.data.data]
    //       this.count += 1
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.top {
  background:#fff;
  z-index:100;
  width:100%;
  .topbar{
    display: flex;
    width:100%;
    color:#999;
    box-sizing: border-box;
    margin:10px 0;
    justify-content:space-between;
    .city-selector {
      text-align: left;
      color:#333;
      box-sizing: border-box;
      margin-left:10px;
      margin-top:5px;
    }
    .topbar-container {
      text-align: right;
      display: flex;
      box-sizing: border-box;
      margin-right:15px;
      .qc{
        border:1px solid #dadada;
        font-weight:bold;
        margin-right:10px;
        font-size:12px;
        color:black;
        line-height:26px;
        padding:0 10px;
      }
      .sx{
        border:1px solid #dadada;
        font-weight:bold;
        margin-right:10px;
        font-size:12px;
        color:black;
        line-height:26px;
        padding:0 10px;
      }
      .sort{
        border:1px solid #dadada;
        font-weight:bold;
        margin-right:10px;
        font-size:12px;
        color:black;
        line-height:26px;
        padding:0 10px;
      }
      .iconfont icon-sousuo{
        font-size:20px;
      }
    }
  }
}
</style>
